<template>

  <div class="container">
    <LeftNavMenu/>
    <!-- 查询条件 -->
     <div class="check" style="margin-left: 300px; padding-top: 10px;">
      <el-form :inline="true">
        <el-row>
          <el-form-item label="用户ID:" class="item">
            <el-input v-model="queryParam.userId" placeholder="请输入用户ID" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="阶段数:" class="item">

            <el-select @change="stageChange" v-model="stageValue" placeholder="请选择" clearable>
              <el-option
                  v-for="item in stageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
<!--            <el-input v-model="queryParam.stageId" placeholder="请输入阶段数" style="width: 150px;"></el-input>-->
          </el-form-item>
          <el-button class="el-icon-search" size="medium" type="primary" @click="to">查询</el-button>
          <el-button class="el-icon-download" size="medium" type="warning">
            <a class="a" href="http://localhost:8086/u/v1/load/user/stage" target="_top">导出</a>
          </el-button>
        </el-row>
      </el-form>
    </div>
    <!-- 两个条形统计图 -->
    <div class="content">
      <!-- 本轮资产条形统计图 -->
      <div class="chart-wrapper"><zichan :data1="tableData"></zichan></div>
      <!-- 本轮收益条形统计图 -->
      <div class="chart-wrapper"><shouyi :data2="tableData"></shouyi></div>
    </div>
  </div>
</template>

<script>
import LeftNavMenu from '@/components/leftNavMenu'
import zichan from '@/components/zichan.vue'
import shouyi from '@/components/shouyi.vue'
import {listUserEarningsByUserIdAndStageId} from "@/api/UserEarnings";
// import {stageExcel} from "@/api/excel";

export default {
  name: "userInfo",
  components:{
    zichan,
    shouyi,
    LeftNavMenu
  },
  data() {
    return {
      queryParam: {
        userId: null,
        stageId: null
      },
      tableData: [],
      stageOptions: [{
        value: '1',
        label: '阶段一'
      }, {
        value: '2',
        label: '阶段二'
      }, {
        value: '3',
        label: '阶段三'
      }],
      stageValue: '',
    }
  },
  methods: {

    stageChange(){
      this.queryParam.stageId = parseInt( this.stageValue )
    },

    to(){
      if(this.stageValue != '' && this.queryParam.userId != ''){
        listUserEarningsByUserIdAndStageId(this.queryParam).then(res => {
          this.tableData = res.data.data.EarningsByUserIdAndStageId
          // console.log(res.data.data.EarningsByUserIdAndStageId)
          console.log(this.tableData)
        })
      }
    },

  }
}
</script>


<style lang="less">

.a {
  color: white;
  text-decoration: none;
}

.content{
  height: 670px;
  width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 auto;
  // -ms-flex-item-align: center;
  .chart-wrapper{
    height: 300px;
    width: 1000px;
    background-color: #E8E8E8;
    border-radius: 10px;
    box-shadow: 0 2px 10px 3px #B0C4DE;
  }
}

</style>
